<template>
    <div class="register">
        <div class="register_top">
            <div class="register_top_img">
                <van-image width="120" height="120" :src="hmIcon" />
            </div>
            <div class="register_top_title">惠麦电商供应链平台</div>
        </div>
        <van-form @submit="onSubmit" ref="oneRef">
            <van-cell-group inset>
                <div class="register_form_label">手机号</div>
                <van-field name="mobile" v-model="mobile" placeholder="请输入手机号" :rules="[
                    { required: true, trigger: 'onBlur', message: '请输入手机号' },
                    {
                        validator: valiPhone,
                        message: '请输入正确格式手机号',
                    },
                ]" />
                <div class="register_form_label register_form_pwd">验证码</div>
                <van-field v-model="sms" placeholder="请输入验证码" :rules="[
                    { required: true, trigger: 'onBlur', message: '请输入验证码' },
                    {
                        validator: valiCode,
                        message: '请输入正确验证码',
                    },
                ]">
                    <template #button>
                        <div class="codes" @click="onGetCode" v-throttle:click>{{ countdown > 0 ? `${countdown}秒后重新获取` :
                            '获取验证码' }}
                        </div>
                    </template>
                </van-field>
                <div class="register_form_label register_form_pwd">密码</div>
                <van-field v-model="password" :type="newPasswordFlag ? 'password' : 'text'" placeholder="请输入密码" :rules="[
                    { required: true, trigger: 'onBlur', message: '请输入新密码' },
                    {
                        validator: correctPassword,
                        message: '请输入6到16位包含英文，数字，符号的密码',
                    },
                ]">
                    <template #right-icon>
                        <img class="icons" :src="newPasswordFlag ? zhengyan : biyan" alt=""
                            @click="newPasswordFlag = !newPasswordFlag">
                    </template>

                </van-field>
            </van-cell-group>
            <van-button class="register_form_btn" round block type="primary" native-type="submit" v-throttle:click>
                注册
            </van-button>

        </van-form>
    </div>
</template>
<script setup lang="ts">
import { registerCode, register } from '@/api/loginApi'
import { showFailToast, showSuccessToast } from "vant";
import { useRouter } from "vue-router";
const zhengyan = new URL("@/assets/productHome/icon_zhengyan.png", import.meta.url).href;
const biyan = new URL("@/assets/productHome/icon_biyan.png", import.meta.url).href;
import { ref } from "vue";
import hmIcon from '@/assets/login/icon_logo.png'
const router = useRouter();
const mobile = ref('')
const password = ref('')
const sms = ref<number>()
const oneRef = ref()
// 倒计时
const countdown = ref(0)
// 计时器
const timer = ref<any>(null)
// 密码标识
const newPasswordFlag = ref(true)
// 手机号验证
const valiPhone = (val) => /^1[3-9]\d{9}$/.test(val)
// 验证码验证
const valiCode = (val) => /^[0-9]{4}$/.test(val)
// 密码格式验证
const correctPassword = (val) => /^[0-9a-zA-Z!@#$%^&*(),.?":{}|<>]{6,16}$/.test(val)
const onSubmit = async () => {
    if (mobile.value && password.value) {
        await register({ phone: mobile.value, password: password.value, code: sms.value })
        showSuccessToast("注册成功！");
        router.push({
            path: '/login'
        });
    } else {
        showFailToast("请输入账号或密码");
    }
};
/** 获取验证码 */
const onGetCode = async () => {
    await oneRef.value.validate('mobile')
    if (countdown.value > 0) {
        showFailToast("验证码已发送，请勿重复点击");
    } else {
        await registerCode({
            phone: mobile.value,
        }).then(() => {
            showSuccessToast('验证码发送成功')
            startCountdown()
        })
    }
}
// 倒计时
const startCountdown = () => {
    countdown.value = 60; // 设置倒计时时间为60秒
    timer.value = setInterval(() => {
        if (countdown.value > 0) {
            countdown.value--;
        } else {
            clearInterval(timer.value);
            timer.value = null;
        }
    }, 1000);
}

</script>
<style lang="less" scoped>
.register {
    width: 100%;
    height: calc(100vh - 90px);

    .icons {
        width: 20px;
        height: 20px;
    }

    .codes {
        font-weight: 400;
        font-size: 14px;
        color: #0094FF;
    }

    :deep(.van-field__right-icon) {
        display: flex;
        align-items: center;
    }

    .register_top {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        text-align: center;
        width: 100%;
        color: @main-text-color;
        background: url('@/assets/login/denglubeijing.png') no-repeat;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background-size: 100% 100%;

        .register_top_title {
            width: 100%;
        }
    }

    :deep(.van-cell-group--inset) {
        border-radius: 0;
        margin-top: 40px;

    }

    :deep(.van-cell) {
        background: rgba(246, 250, 255);
        border-radius: 30px;

        &__title {
            margin-right: 20px;
            width: 28px;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: @main-text-color;
        }
    }

    .register_form_label {
        font-size: 14px;
        margin: 10px 0;
        color: @main-text-color;
    }

    .register_form_pwd {
        margin-top: 30px;
    }

    .register_form_btn {
        .flex-center;
        width: 345px;
        margin-top: 20px;
        margin-left: 15px;
        height: 38px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        background: rgba(0, 149, 255);
        border-radius: 30px;
        color: @light-text-color;
    }
}
</style>